<template>
	<div class="payment-page">
		<div style="width: 93%;margin-left: 12px;background: #ffffff;border-radius: 12px;padding: 10px;">
			<div style="font-size: 15px;margin-bottom: 10px;">订单编号：{{ order_sn }}</div>
			<div>订单状态：
			<text style="font-size: 18px;color: #07c160;" v-if="orderData.order_status==10">待发货</text>
			<text style="font-size: 18px;color: #07c160;" v-if="orderData.order_status==4">待收货</text>
			<text style="font-size: 18px;color: #ff692f;" v-if="orderData.order_status==-1">退款中</text>
			<text style="font-size: 18px;color: red;" v-if="orderData.order_status==-2">拒绝退款</text>
			<text style="font-size: 18px;color: darkgray;" v-if="orderData.order_status==-10">已退款</text>
			<text style="font-size: 18px;color: #232323;" v-if="orderData.order_status==20">已完成</text>
			<text style="font-size: 18px;color: #232323;" v-if="orderData.order_status==-20">已取消</text>
		    </div>
			<div style="margin-top: 10px;" v-if="orderData.order_status==-2">拒绝退款原因：<text style="color: red;">{{ orderData.reason_rejection }}</text></div>
			<div style="margin-top: 10px;" v-if="orderData.order_status==-2||orderData.order_status==-10||orderData.order_status==-1">申请退款的原因：<text style="color: red;">{{ orderData.refund_reason }}</text></div>
		    <div style="margin-top: 10px;">快递/物流单号：<text>{{ orderData.tracking_sn }}</text></div>
		</div>
		<!-- 地址选择 -->
		<div class="address-section">
			<img src="https://shalong.taiyanyue.top/images/riLine-map-pin-line1.png" class="address-icon" />
			<div class="address-text">
				<span
					v-if="orderData.province_name">{{ orderData.province_name }}{{ orderData.city_name }}{{ orderData.area_name }}{{ orderData.street_address }}</span>
				<span v-else>请选择收货地址</span>
			</div>
			<!-- <img src="https://shalong.taiyanyue.top/images/arrow-right.png" class="arrow-icon" /> -->
		</div>

		<!-- 商品清单 -->
		<div class="product-section">
			<div class="section-title">商品清单</div>
			<div class="product-list">
				<div class="product-item" v-for="(item, index) in orderData.goods_order_list" :key="index">
					<img :src="item.goods_cover_path" class="product-image" />
					<div class="product-info">
						<div class="product-name">{{ item.goods_name }}</div>
						<div class="product-price">¥{{ item.goods_price }}</div>
					</div>
					<div class="product-quantity">x{{ item.purchase_quantity }}</div>
				</div>
			</div>

			<!-- 小计 -->
			<div class="subtotal">
				<div>小计{{ orderData.goods_order_count }}件</div>
				<div class="subtotal-price">应付：<text
						style="color: #369a68;font-size: 20px;">¥{{ orderData.total_price }}</text>
				</div>
			</div>
		</div>

		<!-- 备注 -->
		<div class="remark-section">
			<div class="section-title">备注</div>
			<input type="text" style="border: none;" disabled="" placeholder="您未添加备注" v-model="orderData.order_remark" />
		</div>

		<!-- 支付方式 -->
		<div class="payment-method" v-if="orderData.pay_at">
			<div class="section-title">支付方式</div>
			<div class="method-item">
				<img src="https://shalong.taiyanyue.top/images/st-weixinzhifu1.png" class="payment-icon" />
				<div class="method-name">微信支付</div>
				<img v-if="paymentMethod === 'wechat'" src="https://shalong.taiyanyue.top/images/fa5-check-circle-fas1.png"
					class="selected-icon" />
			</div>
		</div>

		<!-- 底部支付栏 -->
		<!-- <div class="footer-bar">
			<div class="total-amount">
				<span>待支付</span>
				<span class="amount">¥{{ orderData.total_price }}</span>
			</div>
			<button class="pay-button" @click="pay">支付</button>
		</div> -->
	</div>
</template>

<script>
	import {
		order_getGoodsOrderDetails
	} from '@/api/system/user.js'
	export default {
		data() {
			return {
				remark: '', // 备注信息
				paymentMethod: 'wechat', // 支付方式
				xuanzong: {},
				orderData: {},
				order_sn: ""
			}
		},
		onLoad(options) {
			if (options.data) {
				const receivedData = JSON.parse(decodeURIComponent(options.data));
				console.log('接收到的数据:', receivedData);
				this.order_sn = receivedData.order_sn
				this.order_getGoodsOrderDetails()
			}
		},
		created() {
			
		},
		computed: {},
		methods: {
			async order_getGoodsOrderDetails(){
				const data = await order_getGoodsOrderDetails({order_sn:this.order_sn});
				this.orderData=data.content.data;
			}
		}
	}
</script>

<style scoped>
	.payment-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 90px;
		/* 防止被底部栏遮挡 */
		padding-top: 10px;
	}

	/* 地址选择样式 */
	.address-section {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 15px;
		margin-bottom: 10px;
		width: 93%;
		margin-left: 12px;
		border-radius: 12px;
	}

	.address-icon {
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}

	.address-text {
		flex: 1;
		color: #333;
	}

	.arrow-icon {
		width: 16px;
		height: 16px;
	}

	/* 商品清单样式 */
	.product-section {
		background: #fff;
		margin-bottom: 10px;
		padding: 15px;
		width: 93%;
		margin-left: 12px;
		border-radius: 12px;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.product-item {
		display: flex;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.product-image {
		width: 80px;
		height: 80px;
		margin-right: 10px;
		border-radius: 12px;
	}

	.product-info {
		flex: 1;
	}

	.product-name {
		font-size: 14px;
		color: #333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 限制显示2行 */
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		/* 防止长单词或URL溢出 */
		margin-bottom: 20px;
	}


	.product-price {
		font-size: 16px;
		color: #ff4444;
		margin-top: 5px;
	}

	.product-quantity {
		color: #333;
	}

	.subtotal {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15px;
		font-size: 16px;
	}

	.subtotal-price {
		font-weight: 550;
		margin-left: 10px;
	}

	/* 备注样式 */
	.remark-section {
		background: #fff;
		padding: 15px;
		margin-bottom: 10px;
		width: 93%;
		margin-left: 12px;
	}

	.remark-section input {
		width: 100%;
		height: 40px;
		border: 1px solid #f5f5f5;
		border-radius: 4px;
		padding: 0 10px;
		margin-top: 10px;
	}

	/* 支付方式样式 */
	.payment-method {
		background: #fff;
		padding: 15px;
		width: 93%;
		margin-left: 12px;
		border-radius: 12px;
	}

	.method-item {
		display: flex;
		align-items: center;
		padding: 10px 0;
	}

	.payment-icon {
		width: 25px;
		height: 25px;
		margin-right: 10px;
	}

	.method-name {
		flex: 1;
		color: #333;
	}

	.selected-icon,
	.unselected-icon {
		width: 20px;
		height: 20px;
	}

	/* 底部支付栏样式 */
	.footer-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		background: #fff;
		padding: 10px 15px;
		border-top: 1px solid #f0f0f0;
	}

	.total-amount {
		flex: 1;
		font-size: 18px;
		font-weight: 550;
	}

	.amount {
		margin-left: 5px;
		font-size: 18px;
	}

	.pay-button {
		background: #339966;
		color: #fff;
		border: none;
		border-radius: 20px;
		padding-top: 2px;
		padding-bottom: 2px;
		font-size: 16px;
		width: 55%;
	}

	/* 弹窗样式 */
	.popup-content {
		background-color: #fff;
		border-radius: 16px 16px 0 0;
		padding-bottom: 12px;
	}

	.popup-header {
		position: relative;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: bold;
		border-bottom: 1px solid #f5f5f5;
	}

	.close-icon {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		width: 20px;
		height: 20px;
	}

	.form-container {
		padding: 0 15px 15px;
		max-height: 70vh;
		overflow-y: auto;
	}

	.form-item {
		padding: 15px 0;
		border-bottom: 1px solid #f5f5f5;
		position: relative;
	}

	.form-label {
		font-size: 14px;
		color: #333;
		margin-bottom: 10px;
	}

	.form-input,
	.form-textarea {
		font-size: 15px;
		color: #333;
		width: 100%;
	}

	.form-input {
		height: 20px;
		line-height: 20px;
	}

	.form-textarea {
		height: 60px;
		line-height: 1.5;
	}

	.radio-group {
		display: flex;
	}

	.radio-label {
		display: flex;
		align-items: center;
		font-size: 14px;
		margin-right: 20px;
	}

	.error-tip {
		font-size: 12px;
		color: #f56c6c;
		margin-top: 5px;
	}

	.arrow-icon {
		position: absolute;
		right: 0;
		top: 40px;
		width: 16px;
		height: 16px;
	}

	.save-btn {
		height: 44px;
		line-height: 44px;
		text-align: center;
		background-color: #339966;
		color: #ffffff;
		font-size: 16px;
		border-radius: 22px;
	}

	/* 地区选择器样式 */
	.region-picker {
		background-color: #fff;
		border-radius: 16px 16px 0 0;
	}

	.picker-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;
		padding: 0 15px;
		border-bottom: 1px solid #f5f5f5;
	}

	.picker-title {
		font-size: 16px;
		font-weight: bold;
	}

	.picker-view {
		height: 300px;
	}

	.picker-view view {
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 16px;
	}

	.address-list {
		padding: 0 12px;
	}

	.address-card {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 15px;
		margin-bottom: 15px;
	}

	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.name {
		font-size: 16px;
		font-weight: bold;
		margin-right: 15px;
	}

	.phone {
		font-size: 14px;
		color: #666;
	}

	.default-tag {
		margin-left: 10px;
		font-size: 12px;
		color: #339966;
		border: 1px solid #339966;
		border-radius: 3px;
		padding: 0 5px;
		height: 18px;
		line-height: 18px;
	}

	.address-detail {
		font-size: 14px;
		color: #333;
		line-height: 1.5;
		margin-bottom: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.action-btn {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #666;
	}

	.action-btn.active {
		color: #339966;
	}

	.action-icon {
		width: 16px;
		height: 16px;
		margin-right: 5px;
	}

	.action-group {
		display: flex;
	}

	.action-group .action-btn {
		margin-left: 15px;
	}

	.add-btn {

		height: 44px;
		line-height: 44px;
		text-align: center;
		background-color: #339966;
		color: #ffffff;
		font-size: 16px;
		border-radius: 22px;
		box-shadow: 0 2px 10px rgba(51, 153, 102, 0.3);
	}
</style>